import { Component } from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { getUserBalance } from '@/api/user'
import './index.scss'
interface State {
  userBalance: any
}
class Index extends Component<any> {
  constructor(props) {
    super(props)
    this.state = {
      userBalance: []
    }
  }

  state: State

  componentDidMount() {
    //获取用户储值列表
    this.getUserBalance()
  }


  // 监听用户下拉刷新事件
  onPullDownRefresh() {
    // 获取用户储值列表
    this.getUserBalance()
  }

  // 获取用户储值列表
  getUserBalance() {
    getUserBalance({}).then(res => {
      const data = res.data.data
      Taro.stopPullDownRefresh()
      this.setState({
        userBalance: data
      })
    }).catch(() => {
      Taro.stopPullDownRefresh()
    })
  }

  render() {
    const { userBalance } = this.state
    return (
      <View className='body'>
        <View className="message">
          <AtIcon className="message-icon" value='alert-circle' size='16' color='#FF7026'></AtIcon>
          <View className="message-text">由于小程序正在升级改造，储值暂不能在小程序支付；但您仍可前往门店使用储值消费</View>
        </View>
        <View className="list">
          {
            userBalance && userBalance.length > 0 && userBalance.map((val) => {
              return (
                <View className='detail' key={val.vendorLabel}>
                  <View className='detail_left'>
                    {val.vendorLabel}
                  </View>
                  <View className='detail_right'>
                    {val.storageBalance}
                  </View>
                </View>
              )
            })
          }
        </View>
        <View className="tips">没有更多记录啦</View>
      </View>
    )
  }
}
export default Index
